<!-- 添加视频 -->
<!-- 添加视频 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" width="560" :title="title" alignCenter draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
      <el-scrollbar max-height="70vh">
        <div style="width: 100%; min-height: 40vh">
          <!-- 上传剧集 -->
          <rest-upload-qn
            ref="restUploadQnRef"
            v-model:loading="submitLoading"
            v-model="damaEpisodeList"
            :folder="`drama/${dramaId || ''}/episode`"
            :posterFolder="`drama/${dramaId || ''}/cover`"
            :customKeys="{ bindFileUrlKey: 'episodeUrl', bindPosterUrlKey: 'frameUrl', upFileUrlKey: 'url', upPosterUrlKey: 'frameUrl' }"
            :width="90"
            :height="160"
            :maxVideoSize="1024 * 3000"
            :accept="['.mp4', '.m4v', '.mov']"
            :limit="9999"
          ></rest-upload-qn>
        </div>
      </el-scrollbar>
      <el-button type="primary" style="width: 100%; margin-top: 16px" :disabled="submitDisabled" :loading="submitLoading" @click="submit">提交</el-button>
      <rest-image-cropper ref="restImageCropperRef"></rest-image-cropper>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import type { FormInstance } from 'element-plus';
  import { type BaseDramaEpisode, type DramaEpisode, batchAddDamaEpisodeAxios } from '@/api/drama-management';
  type DramaEpisodeItem = { frameUrl: string; episodeUrl: string };

  type $AddShowData = {
    /** 短剧 ID */
    dramaId: number;
    /** 短剧名称 */
    dramaTitle: string;
    /** 添加时的回调 */
    addCallBack?: (dramaEpisode: DramaEpisode[]) => void;
  };

  let addCallBack: $AddShowData['addCallBack'] | undefined = undefined;
  const title = ref('');
  const dramaId = ref(0);
  const dialogVisible = ref(false);
  const elFormRef: Ref<FormInstance | null> = ref(null);
  const damaEpisodeList: Ref<DramaEpisodeItem[]> = ref([]);
  const restImageCropperRef: $RefComp<'RestImageCropper'> = ref(null);
  const submitLoading = ref(false);
  const submitDisabled = computed(() => submitLoading.value || damaEpisodeList.value.length <= 0);
  const restUploadQnRef: $RefComp<'RestUploadQn'> = ref(null);

  /**
   * 显示
   */
  function show(data: $AddShowData) {
    title.value = `新增剧集(${data.dramaTitle})`;
    dramaId.value = data.dramaId;
    damaEpisodeList.value = [];
    addCallBack = 'addCallBack' in data && typeof data.addCallBack === 'function' ? data.addCallBack : undefined;
    dialogVisible.value = true;
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  /** 提交 */
  async function submit() {
    try {
      await elFormRef.value?.validate();
      try {
        submitLoading.value = true;
        const addDramaEpisode: BaseDramaEpisode[] = damaEpisodeList.value.map((item) => ({ ...item, dramaId: dramaId.value, episodeCover: item.frameUrl }));
        const res = await batchAddDamaEpisodeAxios({ episodeList: addDramaEpisode, dramaId: dramaId.value });
        typeof addCallBack === 'function' && addCallBack(res.data);
        submitLoading.value = false;
        damaEpisodeList.value = [];
        ElToast.success('提交成功');
        hide();
      } catch (error) {
        submitLoading.value = false;
        ElToast.error(error.msg || '提交失败，-BD003');
      }
    } catch (error) {
      ElToast.error('提交失败，请完善表单，-BD002');
    }
  }

  defineExpose({ show, hide });
</script>
